<template>
  <div class="container">
    <uv-swiper :list="swipers" height="300"></uv-swiper>
    <view class="info">
      <view class="flex justifyBetween alignCenter">
        <view class="price fz20 flex alignBaseline">
          <text class="fz10">¥</text>
          <view class="bold">{{info.price}}</view>
        </view>
        <view class="textCenter fz12">
          <view class="flex justifyCenter" @click="followFunc">
            <uv-icon name="heart" v-if="!isFollow" size="25"></uv-icon>
            <uv-icon name="heart-fill" v-else size="25" color="#FF0001"></uv-icon>
          </view>
          收藏
        </view>
      </view>
      <view class="name fz14">{{info.storeName}}</view>
    </view>

    <view class="product-info">
      <view class="title fz14 bold">产品详情</view>
      <uv-parse :content="info.content"></uv-parse>
    </view>

    <!-- 评价 -->
    <view class='userEvaluation wrap'>
      <view class='flex alignCenter justifyBetween'>
        <view>用户评价<i>({{replyInfo.sumCount}})</i></view>
        <view class="fz14 flex alignCenter">好评{{replyInfo.replyChance*100 || 0}}%
          <uv-icon name="arrow-right"></uv-icon>
        </view>
      </view>
    </view>

    <view class="recommend wrap">
      <view class="title fz14 bold">为你推荐</view>
      <swiper :indicator-dots="true" class="swiper" :style="{ height: swiperHeight + 'px' }">
        <swiper-item v-for="(el, idx) in recommendList" :key="idx">
          <view class="gridList grids gridColumns3" :id="`gridList${idx}`">
            <view class="gridItem" v-for="(item, index) in el" :index="index" :key="index">
              <view class="productImage">
                <image :src="item.image" mode="aspectFill" />
              </view>
              <view class="productTitle fz12">{{item.storeName}}</view>
              <view class="productPrice flex alignBaseline justifyStart">
                <text class="fz12">¥</text>
                <view class="bold fz14">{{item.price}}</view>
              </view>
            </view>
          </view>
        </swiper-item>
      </swiper>
    </view>

    <view class="actionBtn flex alignCenter justifyBetween">
      <view class="car" @click="proxy.$utils.toLink(`/packagePages/shoppingMall/shoppingCart`)">
        <uv-icon name="shopping-cart" size="24"></uv-icon>
        <view class="fz12">购物车</view>
        <view class="dot flex alignCenter justifyCenter fz10" v-if="cartCount">{{cartCount}}</view>
      </view>
      <view class="flex alignCenter">
        <view style="margin-right: 10px;">
          <uv-button text="加入购物车" color="#F63A0E" shape="circle"></uv-button>
        </view>
        <uv-button text="立即购买" color='#FBAB07' shape="circle"></uv-button>
      </view>
    </view>
  </div>
</template>

<script setup lang="ts">
const { proxy } = getCurrentInstance();
const instance = getCurrentInstance();

let swipers = ref([]);
let id;
let info = ref({});
let recommendList = ref([]);
let swiperHeight = ref(0); //轮播高度
let replyInfo = ref({}); //评论信息
let isFollow = ref(false);
let cartCount = ref(0);

onLoad((e) => {
  id = e.id;
  productDetails();
  getProductGood();
  getReply();
  getCartCount();
});

async function productDetails() {
  let { productInfo, userCollect } = await proxy.$shopApis.productDetails(id);
  isFollow.value = userCollect;
  console.log("订单详情", productInfo);
  swipers.value = JSON.parse(productInfo.sliderImage);
  info.value = productInfo;
}

async function getCartCount() {
  let { count } = await proxy.$shopApis.cartCount({
    numType: true,
    type: "total",
  });
  cartCount.value = count;
  console.log("购物车数量", count);
}

async function getProductGood() {
  //商品推荐
  let arr = [];
  let { totalPage } = await name(1);
  for (let index = 1; index <= totalPage; index++) {
    let { list } = await name(index);
    arr.push(...list);
  }
  recommendList.value = proxy.$utils.chunkArray(arr, 6);
  console.log("商品推荐", recommendList.value);
  nextTick(async () => {
    swiperHeight.value = await viewInfo("#gridList0", "height");
  });
  async function name(page) {
    return await proxy.$shopApis.getProductGood({ page });
  }
}

async function getReply() {
  replyInfo.value = await proxy.$shopApis.getReply(id);
  console.log("评论信息", replyInfo.value);
}

async function followFunc() {
  //已经关注了
  if (isFollow.value) {
    await proxy.$shopApis.collectDel(id);
  } else {
    await proxy.$shopApis.collectAdd({
      id,
      category: "product",
    });
  }
  proxy.$utils.showToast("操作成功");
  productDetails();
}

//获取页面元素信息
function viewInfo(id, type) {
  return new Promise((resolve, reject) => {
    uni
      .createSelectorQuery()
      .in(instance)
      .select(id)
      .boundingClientRect((data) => {
        if (data) {
          resolve(data[type]);
        } else {
          resolve(0);
        }
      })
      .exec();
  });
}
</script>



<style lang="scss">
page {
  background-color: #f8f8f8;
}
</style>

<style lang="scss" scoped>
.container {
  padding-bottom: 85px;
  .info {
    padding: 15px;
    background-color: white;
    .price {
      color: #f55fa1;
    }
    .name {
      margin-top: 15px;
    }
  }
  .product-info {
    background-color: white;
    margin-top: 10px;
    padding: 15px;
    .title {
      margin-bottom: 10px;
    }
  }
  .wrap {
    background-color: white;
    margin-top: 10px;
    padding: 15px;
  }
  .recommend {
    .swiper {
      height: 500px;
    }
    .gridList {
      gap: 10px 10px; //上下间距 左右间距
    }
    .productImage {
      width: 100%;
      height: 0;
      padding-top: 100%;
      position: relative;
      image {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
      }
    }
    .productTitle {
      overflow: hidden;
      text-overflow: ellipsis;
      width: 100%;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      word-break: break-all;
      padding: 3px 0;
    }
    .productPrice {
      width: 100%;
    }
  }
  .actionBtn {
    background-color: white;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 15px 15px 25px 15px;
    .car {
      position: relative;
      .dot {
        position: absolute;
        top: 0;
        right: 0;
        background-color: #e93323;
        color: white;
        border-radius: 50%;
        width: 15px;
        height: 15px;
      }
    }
  }
}
</style>